<template>
  <div class="about">
    <div class="top"><h2>详细页</h2>
    <div>
<el-button type="danger" @click="tuichu()">退出</el-button>
    </div>
    
    </div>
    <div class="big-content">
      <div class="big-content-left">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <div class="checkbox-group">
            <el-checkbox
              v-for="city in cities"
              :label="city.id"
              :key="city.id"
              >{{ city.name }}</el-checkbox
            >
          </div>
        </el-checkbox-group>
      </div>

      <div class="big-content-right">
        <el-row :gutter="10">
          <el-col :span="8"
            ><div class="echarts"><OneEcharts></OneEcharts></div
          ></el-col>
          <el-col :span="8"
            ><div class="echarts">
              <ThreeEcharts ref="ThreeEcharts"></ThreeEcharts></div
          ></el-col>
          <el-col :span="8"
            ><div class="echarts"><TwoEcharts></TwoEcharts></div
          ></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {
  aboutTreeData,
  aboutTreeData1,
  echartsData,
  echartsData1,
  echartsData2,
} from "@/api/index";
import { mapState } from "vuex";
import OneEcharts from "./echarts/OneEcharts.vue";
import ThreeEcharts from "./echarts/threeEchart.vue";
import TwoEcharts from "./echarts/TwoEcharts.vue";
export default {
  components: {
    OneEcharts,
    ThreeEcharts,
    TwoEcharts,
  },
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      allIdList: [],
    };
  },
  computed: {
    ...mapState(["homeTableData"]),
  },

  mounted() {},
  watch: {
    homeTableData: {
      deep: true,
      immediate: true,
      handler(val) {
        this.allIdList = [];
        val.forEach(async (item) => {
          if (item == "230230") {
            let [err, res] = await aboutTreeData();
            this.cities = res;
            res.forEach((item) => {
              this.checkedCities.push(item.id);
              this.allIdList.push(item.id);
            });
          } else {
            let [err, res] = await aboutTreeData1();
            this.cities = res;
            res.forEach((item) => {
              this.checkedCities.push(item.id);
              this.allIdList.push(item.id);
            });
          }
        });
      },
    },
    checkedCities: {
      async handler(val) {
        if (val.length == 5) {
          let [err, res] = await echartsData();
          res.forEach((item) => {
            this.$refs.ThreeEcharts.oneDemo(item);
          });
        } else if (val.length == 4) {
          let [err, res] = await echartsData1();
          res.forEach((item) => {
            this.$refs.ThreeEcharts.oneDemo(item);
          });
        } else if (val.length == 3) {
          let [err, res] = await echartsData2();
          res.forEach((item) => {
            this.$refs.ThreeEcharts.oneDemo(item);
          });
        }
      },
    },
  },

  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.allIdList : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    tuichu(){
      this.$router.push('/')
      window.sessionStorage.removeItem("homeTableData")
    }
  },
};
</script>

<style lang="less" scoped>
.about {
  .top {
    width: 100%;
    height: 100px;
    border: 1px solid red;
    text-align: center;
    line-height: 100px;
    display: flex;
    justify-content:center;
    h2{
      margin-right:10px ;
    }
  }
  .big-content {
    width: 100%;
    height: calc(100vh - 100px);
    border: 1px solid blue;
    display: flex;
    justify-content: space-around;
    padding: 5px;
    .big-content-left {
      width: 220px;
      height: 100%;
      border: 1px solid black;
      padding: 10px;
    }
    .big-content-right {
      width: calc(100vw - 240px);
      height: 100%;
      border: 1px solid red;
      padding: 10px;
      .echarts {
        height: calc(100vh - 135px);
      }
    }
  }
  .checkbox-group {
    display: flex;
    flex-direction: column;
  }
}
</style>
